<script setup>

import { onBeforeUnmount, onMounted, ref } from "vue";
import { Promotion } from "@element-plus/icons-vue";

// 各个对象的引用
const pkWindow = ref(null)
const zoomMask = ref(null)
const zoomRect = ref(null)
const refIframe = ref(null)

// 当前输入框房间号
const roomCid = ref('')

// 画面是否已被放大
let isZoomed = ref(false)

// 进入直播间
const entryRoom = () => {
    refIframe.value.src = `https://www.bilibili.com/blackboard/live/live-activity-player.html?cid=${ roomCid.value }&quality=0&enableAutoPlayTips=0&mute=0&enableCtrlUI=0`
}

// 自动调整PkWindow的高度为16:9
onMounted(() => {

    // 调整窗口大小
    const resize = () => {
        pkWindow.value.style.height = `${ pkWindow.value.offsetWidth * 9 / 16 }px`
        zoomMask.value.style.height = `${ zoomMask.value.offsetWidth * 9 / 16 }px`
    }

    // 立刻执行并在变更窗口大小时执行
    resize()
    window.addEventListener('resize', resize)

    // 注册局部放大事件
    let isMouseDown = false
    zoomMask.value.addEventListener('mousedown', (e) => {

        isMouseDown = true

        // 显示zoomRect
        zoomRect.value.style.display = 'block'
        zoomRect.value.style.width = '0px'
        zoomRect.value.style.height = '0px'
        zoomRect.value.style.left = `${ e.offsetX }px`
        zoomRect.value.style.top = `${ e.offsetY }px`
    })

    zoomMask.value.addEventListener('mousemove', (e) => {
        if ( isMouseDown ) {
            zoomRect.value.style.width = `${ e.offsetX - parseInt(zoomRect.value.style.left) }px`
            zoomRect.value.style.height = `${ (e.offsetX - parseInt(zoomRect.value.style.left)) * 9 / 16 }px`
        }
    })

    zoomMask.value.addEventListener('mouseup', () => {

        // 如果已被放大 任意拖动恢复原始比例
        if ( isZoomed.value === true ) {
            zoomRect.value.style.display = 'none'
            refIframe.value.style.transform = ''
            isZoomed.value = false
            return;
        }

        isMouseDown = false

        // 获取zoomRect和zoomMask的位置和大小
        const rectClientRect = zoomRect.value.getBoundingClientRect()
        const maskClientRect = zoomMask.value.getBoundingClientRect()

        // 矩形框宽度小于100px不放大
        if ( rectClientRect.width < 100 ) {
            zoomRect.value.style.display = 'none'
            return;
        }

        // 矩形框相对zoomMask的位置
        const top = rectClientRect.top - maskClientRect.top
        const left = rectClientRect.left - maskClientRect.left

        // 顶点相对百分比
        const topPercent = top / maskClientRect.height
        const leftPercent = left / maskClientRect.width

        // 按比例使用scale放大iframe
        refIframe.value.style.transformOrigin = 'top left'
        refIframe.value.style.transform = `scale( ${ 1 / (rectClientRect.width / maskClientRect.width) } )`
        refIframe.value.style.transform += `translate( ${ -leftPercent * 100 }%, ${ -topPercent * 100 }% )`

        // 隐藏zoomRect
        zoomRect.value.style.display = 'none'
        isZoomed.value = true
    })

    // 卸载时注销事件
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resize)
    })
})

</script>

<template>
    <!-- 对战界面 -->
    <div class="battle">
        <div class="header-bar">
            <div class="input">
                <el-input
                        v-model="roomCid"
                        style="width: 100%"
                        placeholder="请输入房间号"
                        class="input-with-select"
                        size="small"
                >
                    <template #append>
                        <el-button v-btn :icon="Promotion" @click="entryRoom"/>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="pk-window" ref="pkWindow">
            <div class="zoom-mask" ref="zoomMask"></div>
            <div class="zoom-rect" ref="zoomRect"></div>
            <iframe style="width: 100%; height: 100%; border: none;"
                    ref="refIframe"
                    src=""
                    framespacing="0"
                    scrolling="no"
                    pointerEvents='none'
                    allow="autoplay; encrypted-media"
                    allowfullscreen></iframe>
        </div>
    </div>
</template>

<style scoped>
.battle {
    width: 100%;
    margin-top: 10px;
    user-select: none;

    .header-bar {
        display: flex;
        margin-bottom: 20px;
    }

    .tool-bar {
        display: flex;
        align-items: center;
        justify-content: center;

        .timer {

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 20px;
            padding-bottom: 10px;

            .title {
                color: #666;
                font-weight: 700;
                font-size: 18px;
                margin-bottom: 10px;
            }

            .time {
                color: #666;
                font-weight: 700;
                font-size: 28px;
            }
        }

        .score {

            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 20px;
            padding-bottom: 10px;

            .title {
                color: #666;
                font-weight: 700;
                font-size: 18px;
                margin-bottom: 10px;
            }

            .value {
                color: #666;
                font-weight: 700;
                font-size: 28px;
            }
        }
    }
}

.pk-window {
    width: 100%;
    background: #242424;
    position: relative;
    overflow: hidden;
    user-select: none;

    .zoom-mask {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1000;
        user-select: none;
    }

    .zoom-rect {
        width: 0;
        height: 0;
        position: absolute;
        border: 2px solid red;
        display: none;
        user-select: none;
    }
}

</style>
